<template>
	<scroll-view scroll-y class="page">
		<view v-for="edge in autoParams" :key="edge.id" class="card">
			<!-- 第几边 + 启动时间 -->
			<view class="row">
				<view class="pair">
					<text class="edge-title">第{{ edge.id }}边</text>
				</view>
				<view class="pair">
					<text class="label">启动时间：</text>
					<picker mode="time" :value="edge.startTime" @change="e => setStartTime(edge.id, e.detail.value)">
						<view class="value">{{ edge.startTime }}</view>
					</picker>
				</view>
			</view>

			<!-- 灌溉方式 -->
			<view class="row">
				<text class="label">灌溉方式：</text>
				<view class="btn-group">
					<button v-for="m in ['灌溉','施肥']" :key="m" :class="['btn',{active: edge.method === m}]"
						@click="setMethod(edge.id,m)">
						{{ m }}
					</button>
				</view>
			</view>

			<!-- 肥路选择 -->
			<view class="row">
				<text class="label">肥路选择：</text>
				<checkbox-group @change="e => setFertilizers(edge.id,e.detail.value)">
					<label v-for="f in ['A','B','C']" :key="f">
						<checkbox :value="f" :checked="edge.fertilizers.includes(f)" /> {{ f }}肥
					</label>
				</checkbox-group>
			</view>

			<!-- 开启状态 -->
			<view class="row">
				<text class="label">开启状态：</text>
				<switch :checked="edge.status==='on'" @change="e => setStatus(edge.id,e.detail.value?'on':'off')" />
			</view>

			<!-- 出水口信息 -->
			<view class="section">
				<text class="section-title">出水口信息</text>
				<view v-for="outlet in edge.outlets" :key="outlet.id" class="sub-card">
					<!-- 出水口 + 灌区名称 同一行 -->
					<view class="row">
						<view class="pair">
							<text class="label">出水口：</text>
							<text class="value">{{ outlet.id }}</text>
						</view>
						<view class="pair">
							<text class="label">灌区名称：</text>
							<text class="value">{{ outlet.areaName }}</text>
						</view>
					</view>

					<view class="row">
						<text class="label">A肥：</text>
						<input class="input" type="number" v-model="outlet.amountA" /> ml
					</view>
					<view class="row">
						<text class="label">B肥：</text>
						<input class="input" type="number" v-model="outlet.amountB" /> ml
					</view>
					<view class="row">
						<text class="label">C肥：</text>
						<input class="input" type="number" v-model="outlet.amountC" /> ml
					</view>
					<view class="row">
					  <text class="label">确认设置：</text>
					  <switch
					    :checked="outlet.confirmed"
					    @change="e => outlet.confirmed = e.detail.value"
					  />
					</view>

				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const autoParams = ref([])

	onLoad(() => {
		const areaNames = ["一区", "二区", "三区"]
		autoParams.value = Array.from({
			length: 12
		}, (_, i) => ({
			id: i + 1,
			startTime: "08:00",
			method: "灌溉",
			fertilizers: [],
			status: "off",
			outlets: areaNames.map((name, idx) => ({
				id: idx + 1,
				areaName: name,
				amountA: 0,
				amountB: 0,
				amountC: 0,
				confirmed: false
			}))
		}))
	})

	function setStartTime(edgeId, time) {
		autoParams.value.find(e => e.id === edgeId).startTime = time
	}

	function setMethod(edgeId, method) {
		autoParams.value.find(e => e.id === edgeId).method = method
	}

	function setFertilizers(edgeId, values) {
		autoParams.value.find(e => e.id === edgeId).fertilizers = values
	}

	function setStatus(edgeId, status) {
		autoParams.value.find(e => e.id === edgeId).status = status
	}
</script>

<style scoped lang="scss">
	.page {
		background: #f5f5f5;

		.card {
			margin-bottom: 20rpx;
			padding: 16rpx 24rpx;
			border-radius: 10rpx;
			background: #fff;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 8rpx 0;

				.pair {
					display: flex;
					align-items: center;
					gap: 6rpx; // 标题和值紧贴显示
				}

				.label {
					font-size: 24rpx;
					color: #666;
				}

				.value {
					font-size: 24rpx;
					font-weight: bold;
					color: #333;
				}

				.input {
					flex: 1;
					border: 1px solid #ddd;
					border-radius: 4rpx;
					padding: 6rpx 10rpx;
					font-size: 22rpx;
				}
			}

			.edge-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #2196f3;
			}

			.section {
				margin-top: 12rpx;

				.section-title {
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
					color: #4caf50;
				}

				.sub-card {
					margin-bottom: 12rpx;
					padding: 12rpx 20rpx;
					border: 1px solid #eee;
					border-radius: 6rpx;
					background: #fafafa;

					.row {
						padding: 6rpx 0;
						 display: flex;
						  justify-content: space-between;
						  align-items: center;
						  gap: 20rpx; // 控制左右字段间距

						.pair {
							display: flex;
							align-items: center;
							gap: 6rpx;
						}

						.label {
							font-size: 22rpx;
							color: #666;
						}

						.value {
							font-size: 22rpx;
							font-weight: bold;
							color: #333;
						}
					}
				}
			}

			.btn-group {
				display: flex;
				gap: 12rpx;

				.btn {
					padding: 8rpx 16rpx;
					font-size: 22rpx;
					border-radius: 6rpx;
					background: #eee;
					color: #333;

					&.active {
						background: #2196f3;
						color: #fff;
					}
				}
			}
		}
	}
</style>